<section id="content">
    <section class="vbox">
        <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li><a href="{:url('Home/index')}"><i class="fa fa-home"></i> 首页</a></li>
                <li><a href="#">问答记录</a></li>
            </ul>
            <section class="panel panel-default">
                <div class="table-responsive">
                    <table class="table table-striped m-b-none" data-ride="datatables"
                        style="text-align:center!important;">
                        <thead>
                            <tr>
                                <th colspan="11">
                                    <div class="row page_top_search_bt" style="padding: 1rem 0;">
                                        <!-- 搜索等按钮 -->
                                        <form class="col-sm-12" action="{:url('Qa/recordList')}" method="post"
                                            enctype="multipart/form-data">
                                            <input class='form-control flatpickr' name="create_date_from"
                                                id="create_date_from" data-enable-time=false data-time_24hr=false
                                                placeholder="请输入起始日期" value="{$create_date_from}">
                                            <input class='form-control flatpickr' name="create_date_to"
                                                id="create_date_to" data-enable-time=false data-time_24hr=false
                                                placeholder="请输入截止日期" value="{$create_date_to}">
                                            <input type="text" class="form-control" data-required="true" name="search"
                                                value="{$search}" placeholder="输入昵称搜索">
                                            <button type="submit" class="btn btn-success btn-s-xs btn">搜索</button>
                                        </form>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th width="5%" style="text-align:center!important;">昵称</th>
                                <th width="10%" style="text-align:center!important;">提交时间</th>
                                <th width="5%" style="text-align:center!important;">性别</th>
                                <th width="5%" style="text-align:center!important;">年龄</th>
                                <th width="10%" style="text-align:center!important;">民族</th>
                                <th width="15%" style="text-align:center!important;">婚姻情况</th>
                                <th width="15%" style="text-align:center!important;">文化程度</th>
                                <th width="15%" style="text-align:center!important;">职业</th>
                                <th width="20%" style="text-align:center!important;">常住地</th>
                                <th width="10%" style="text-align:center!important;">操作</th>
                            </tr>
                        </thead>
                        <tbody style="font-size:1em;">
                            {volist name="list" id="v"}
                            <tr>
                                <td class="nowrap left">{$v.jbqk.nick_name}</td>
                                <td class="nowrap left">{$v.jbqk.end_time}</td>
                                <td class="nowrap left">{$v.jbqk.q_no_01?$v.jbqk.q_no_01:''}</td>
                                <td class="nowrap left">{$v.jbqk.q_no_02?$v.jbqk.q_no_02:''}</td>
                                <td class="nowrap left">{$v.jbqk.q_no_03?$v.jbqk.q_no_04:''}</td>
                                <td class="left">{$v.jbqk.q_no_04?$v.jbqk.q_no_05:''}</td>
                                <td class="left">{$v.jbqk.q_no_05?$v.jbqk.q_no_06:''}</td>
                                <td class="left">{$v.jbqk.q_no_06?$v.jbqk.q_no_06:''}</td>
                                <td class="left">{$v.jbqk.q_no_07?$v.jbqk.q_no_07:''}</td>
                                <td class="nowrap">
                                    <a href="javascript:openPopupWindow('答题详情：{$v.jbqk.nick_name} {$v.jbqk.openid}','{:url('Qa/recordDetail',array('openid'=>$v.jbqk.openid))}','50','90');"
                                        class="btn btn-s-md btn-link">答题详情</a>
                                </td>
                            </tr>
                            {/volist}
                        </tbody>
                    </table>
                </div>
                <div class="page_line" style="display: flex;">
                    <form action="{:url('Qa/recordList')}" method="post" style="width: unset;margin: 0;">
                        <div>
                            共<font color="Red">{$count}</font>条记录&nbsp;&nbsp;当前<font color="Red">{$page}</font>/
                            <font color="Red">{$allPage}
                            </font>页
                        </div>
                        {if $page > 1}
                        <a id="pager_First" href="{:url('Qa/recordList',array('page'=>1,'search'=>$search))}"
                            title="首页">[首页]</a>
                        <a id="pager_Prev" href="{:url('Qa/recordList',array('page'=>$page-1,'search'=>$search))}"
                            title="前页">[前页]</a>
                        {/if}
                        {if $page < $allPage} <a id="pager_Next" title="后页"
                            href="{:url('Qa/recordList',array('page'=>$page+1,'search'=>$search))}">[后页]</a>
                            <a id="pager_Last" title="尾页"
                                href="{:url('Qa/recordList',array('page'=>$allPage,'search'=>$search))}">[尾页]</a>
                            {/if}
                            {if $allPage > 1}
                            <input type="text" style="display: none" name="search" value="{$search?$search:''}">
                            <input name="page" type="text" value="{$page}" id="pager_txbPage" style="width:30px;">
                            <input type="submit" name="pager$btnGo" value="转到" id="pager_btnGo"
                                class="btn btn-success btn-s-xs btn">{/if}
                    </form>
                    <div class="bottom_right_download">
                        <!-- 下载数据 -->
                        {php} if($count > 20000){{/php}
                        <a href="javascript:alert('不能下载超过2万条的数据，请修改搜索条件后重试。');"
                            class="btn btn-s-md btn-success">下载数据</a>
                        {php} }else{ {/php}
                        <a href="javascript:downloadExcel('{:url('Qa/showRecordListDownload')}','openByPopupWindow');"
                            class="btn btn-s-md btn-success">下载数据</a>
                        {php} }{/php}
                    </div>
                </div>
            </section>
        </section>
    </section>
</section>

<script src="__SITEURL__/../flatpickr/flatpickr.min.js"></script>
<script src="__SITEURL__/../flatpickr/flatpickr.l10n.zh.js"></script>
<script type="text/javascript">
    $(function () {
        // 日期时间控件初始化
        $(".flatpickr").flatpickr({
            locale: "zh",
            allowInput: true
        });
    });
</script>
<style type="text/css">
    .page_line {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .page_line form {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .page_line form a {
        display: block;
        margin: auto 5px;
    }

    .page_top_search_bt form {
        display: flex;
        flex: 1;
        justify-content: flex-end;
    }

    .page_top_search_bt form input {
        width: 24rem;
        display: block;
        margin-left: 0;
        z-index: unset;
    }

    .page_top_search_bt .flatpickr {
        width: 11rem;
        text-align: center;
    }

    .bottom_right_download {
        margin: auto;
        margin-right: 6px;
    }

    img {
        width: 60px;
    }

    input {
        height: 30px;
        margin: 0 10px;
    }

    .classify_select {
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        height: 34px;
        font-size: 14px;
        color: #555;
        width: auto;
        display: inline-block;
    }

    .btn {
        height: 34px;
        line-height: 34px;
        padding: unset;
        margin: 0 10px;
        padding: 0 20px;
    }

    .nowrap {
        white-space: nowrap;
    }

    .left {
        text-align: left;
    }

    .flatpickr {
        width: 11rem;
        display: block;
        height: 34px;
        font-size: 12px;
        margin-right: 8px;
        text-align: center;
        border: 1px solid #ccc;
    }
</style>
<!-- datatables -->